<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    const router = [
        {
            path: '/',
            redirect: '/app',
            component: 'app'
        },
        {
            path: '/app',
            component: 'app'
        },
        {
            path: '/wel',
            component: 'welcome'
        },
        {
            path: '/detail',
            component: 'detail',
            children: [{
                path: '/detail/path1',
                component: 'child'
            }, {
                path: '/detail/path2',
                component: 'childnth'
            }]
        }
    ]

    function flat (router) {
        let routes = []
        router.forEach(item => {
            if (item.redirect) {
                routes.push(`<Redirect key=${item.path} from=${item.path} to=${item.redirect} exact>{}</Redirect>`)
            }
            routes.push(`<Route key=${item.path} path=${item.path} component=${item.component}>{}</Route>`)

            if (item.children) {
                routes = routes.concat(this.flat(item.children))
            }
        })
        return routes
    }

    console.log(flat(router))
</script>
</body>
</html>
